<template>
    <div class="con">
        <div class="info1" style="margin-top:24px">
            <dl>
                <dd>持卡人姓名</dd>
                <dt>
                    <p>{{accountName}}</p>
                </dt>
            </dl>
            <dl>
                <dd>身份证号码</dd>
                <dt>
                    <p>{{idNumber}}</p>
                </dt>
            </dl>
            <dl>
                <dd>银行卡号</dd>
                <dt>
                    <p>{{accountNo}}</p>
                </dt>
            </dl>
            <dl>
                <dd>所属银行</dd>
                <dt>
                    <p>{{bankName}}</p>
                </dt>
            </dl>
            <dl>
                <dd>有效期</dd>
                <dt>
                    <input
                        type="text"
                        placeholder="请输入有效期"
                        style="margin-right:30px;width:180px"
                        v-model="expireTime"
                    >
                    <div @click="example1()" class="wenhao">
                        <img src="../assets/images/wenhao2.png" alt>
                    </div>
                </dt>
            </dl>
            <dl>
                <dd>安全码</dd>
                <dt>
                    <input
                        type="text"
                        placeholder="请输入卡背面末三位数字"
                        style="margin-right:30px;width:180px"
                        v-model="cvv2"
                    >
                    <div @click="example2()" class="wenhao">
                        <img src="../assets/images/wenhao2.png" alt>
                    </div>
                </dt>
            </dl>
        </div>
        <div class="info1" style="margin-top:12px">
            <dl>
                <dd>手机号</dd>
                <dt>
                    <input
                        type="text"
                        placeholder="请输入银行预留手机号"
                        pattern="[0-9]*"
                        v-model="phone"
                        oninput="if(this.value.length>11) this.value = this.value.slice(0,11);"
                    >
                </dt>
            </dl>
            <dl class="last">
                <dd>验证码</dd>
                <dt>
                    <input
                        type="text"
                        placeholder="请输入验证码"
                        style="margin-right:75px;width:138px"
                        v-model="authCode"
                    >
                    <button @click="send()" id="yzm">获取验证码</button>
                </dt>
            </dl>
        </div>
        <div class="photo" v-show="showphoto">
            <span>人像采集</span>
            <input type="file" class="file" id="file" @change="changephoto()">
            <img src="../assets/images/camera.png" alt class="camera" id="url">
        </div>

        <div class="btn" @click="ok()">
            <button>提交</button>
        </div>

        <!-- 示例弹框1 -->
        <div class="bg" v-show="pop1">
            <div class="pop">
                <img src="../assets/images/yxq.png" alt class="img">
                <div class="close" @click="close1">
                    <img src="../assets/images/close.png" alt>
                </div>
            </div>
        </div>
        <!-- 示例弹框2 -->
        <div class="bg" v-show="pop2">
            <div class="pop">
                <img src="../assets/images/aqm.png" alt class="img">
                <div class="close" @click="close2">
                    <img src="../assets/images/close.png" alt>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "addcreditcardnext",
    data() {
        return {
            accountName: "",
            accountNo: "",
            timestamp: "",
            bankId: "",
            bankName: "",
            idNumber: "",
            expireTime: "",
            cvv2: "",
            phone: "",
            authCode: "",
            pop1: false,
            pop2: false,
            showphoto: true,
            cardId: ""
        };
    },
    methods: {
        example1() {
            this.pop1 = true;
        },
        close1() {
            this.pop1 = false;
        },
        example2() {
            this.pop2 = true;
        },
        close2() {
            this.pop2 = false;
        },
        send() {
            var myreg = /^[1][0-9]{10}$/;
            if (this.expireTime == "") {
                this.$toast("请输入有效期");
            } else if (this.cvv2 == "") {
                this.$toast("请输入安全码");
            } else if (this.phone == "") {
                this.$toast("请输入手机号");
            } else if (!myreg.test(this.phone)) {
                this.$toast("请填写正确的手机号");
            } else if (!myreg.test(this.phone)) {
                this.$toast("请填写正确的手机号");
            } else {
                var yzm = document.getElementById("yzm");

                var clock = "";
                var nums = 60;
                yzm.disabled = true; //将按钮置为不可点击
                yzm.style.opacity = "0.5";
                yzm.innerHTML = nums + "s";
                clock = setInterval(doLoop, 1000); //一秒执行一次
                function doLoop() {
                    nums--;
                    if (nums > 0) {
                        yzm.innerHTML = nums + "s";
                    } else {
                        clearInterval(clock); //清除js定时器
                        yzm.disabled = false;
                        yzm.style.opacity = "1";

                        yzm.innerHTML = "获取验证码";
                        nums = 60; //重置时间
                    }
                }
                this.axios({
                    method: "post",
                    headers: { token: localStorage.getItem("token") },
                    url: `${
                        this.siteUrl
                    }/app/account/signCardToSms?appid=web.2019&format=json&timestamp=${
                        this.timestamp
                    }`,
                    data: {
                        accountName: this.accountName,
                        userId: localStorage.getItem("userId"),
                        expireTime: this.expireTime,
                        cardNo: this.accountNo.replace(/\s/g, ""),
                        bankId: this.bankId, //  根据卡号匹配银行接口会返回该数据
                        phone: this.phone,
                        idNumber: this.idNumber,
                        cvv2: this.cvv2
                    }
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.success == 1) {
                            this.$toast(response.data.message);
                            this.cardId = response.data.data.cardId;
                        } else {
                            this.$toast(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$toast("连接服务器异常");
                    });
            }
        },
        ok() {
            var myreg = /^[1][0-9]{10}$/;
            if (this.expireTime == "") {
                this.$toast("请输入有效期");
            } else if (this.cvv2 == "") {
                this.$toast("请输入安全码");
            } else if (this.phone == "") {
                this.$toast("请输入手机号");
            } else if (!myreg.test(this.phone)) {
                this.$toast("请填写正确的手机号");
            } else if (this.authCode == "") {
                this.$toast("请输入验证码");
            } else if (this.cardId == "") {
                this.$toast("请重新获取验证码");
            } else {
                this.axios({
                    method: "post",
                    headers: { token: localStorage.getItem("token") },
                    url: `${
                        this.siteUrl
                    }/app/account/signCard?appid=web.2019&format=json&timestamp=${
                        this.timestamp
                    }`,
                    data: {
                        cardId: this.cardId,
                        authCode: this.authCode,
                        accountName: this.username,
                        userId: localStorage.getItem("userId"),
                        expireTime: this.expireTime,
                        accountNo: this.accountNo.replace(/\s/g, ""),
                        bankId: this.bankId, //  根据卡号匹配银行接口会返回该数据
                        phone: this.phone,
                        idNumber: this.idNumber,
                        cvv2: this.cvv2
                    }
                })
                    .then(response => {
                        console.log(response);
                        if (response.data.success == 1) {
                            if (this.$route.params.type == 1) {
                                this.$router.push({ name: "choosecredit" });
                            } else if(this.$route.params.type == 2) {
                                this.$router.push({ name: "mycard" });
                            }else{
                                 this.$router.push({ name: "choosebackcredit" });
                            }

                            this.$toast(response.data.message);
                        } else {
                            this.$toast(response.data.message);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        this.$toast("连接服务器异常");
                    });
            }
        },
        changephoto() {
            var file = document.getElementById("file").files[0];
            var param = new FormData();
            param.append("file", file);
            this.axios({
                method: "post",
                headers: { token: localStorage.getItem("token") },

                url: `${this.siteUrl}/app/img/upload?appid=web.2019&timestamp=${
                    this.timestamp
                }&imageIndex=1&userId=${localStorage.getItem("userId")}`,
                data: param
            })
                .then(response => {
                    console.log(response);
                    if (response.data.success == 1) {
                        this.url = response.data.data.smallShowUrl;

                        document.getElementById("url").src = this.url;
                    } else {
                        this.$Message.error(response.data.message);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.accountName = localStorage.getItem("accountName");
        this.accountNo = localStorage.getItem("xykaccountNo");
        this.bankId = localStorage.getItem("xykbankId");
        this.bankName = localStorage.getItem("xykbankName");
        this.idNumber = localStorage.getItem("idNumber");
   
         if (localStorage.getItem("imgStatus") == "1") {
                        this.showphoto = false;
                    } else {
                        this.showphoto = true;
                    }

        // 检查用户是否上传人脸图片
        // this.axios({
        //     method: "post",
  

        //     url: `${
        //         this.siteUrl
        //     }/app/account/getImgStatus?appid=web.2019&timestamp=${
        //         this.timestamp
        //     }`,
        //     data: { userId: localStorage.getItem("userId") }
        // })
        //     .then(response => {
        //         console.log(response);
        //         if (response.data.success == 1) {
        //             if (response.data.data.imgStatus == 1) {
        //                 this.showphoto = false;
        //             } else {
        //                 this.showphoto = true;
        //             }
        //         } else {
        //             this.$Message.error(response.data.message);
        //         }
        //     })
        //     .catch(function(error) {
        //         console.log(error);
        //     });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
    background: #f9f9f9;
    overflow: hidden;
}

.con .info1 {
    background: #fff;
}

.con .info1 dl {
    height: 60px;
    border-bottom: 1px solid #ececec;
    width: 90%;
    margin-left: 5%;
}
.con .info1 dd {
    line-height: 60px;
    color: #2d3659;
    font-weight: 200;
    float: left;
}
.con .info1 dt {
    float: right;
    width: 210px;
    height: 60px;
    line-height: 60px;
    position: relative;
    text-align: right;
    color: #2d3659;
}
.con .info1 .wenhao {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 0px;
    top: 20px;
}
.con .info1 .wenhao img {
    width: 100%;
}
.con .info1 button {
    position: absolute;
    right: -10px;
    top: 0px;
    color: #ffae4e;
    width: 80px;
    text-align: center;
    background: transparent
}
.con .info1 .last {
    border: none;
}
.con .info1 dt input {
    text-align: right;
}

.btn {
    width: 90%;
    margin-left: 5%;
    margin-top: 24px;
    margin-bottom: 24px;
    height: 48px;
    line-height: 48px;
    background: #ffae4e;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0px 10px 30px 0px #fbc27f;
}
.btn button {
    width: 100%;
    font-size: 17px;
    color: #fff;
    background: transparent;
}
.photo {
    width: 100%;
    height: 114px;
    background: #fff;
    margin-top: 12px;
    line-height: 114px;
    position: relative;
}
.photo span {
    margin-left: 20px;
    color: #2d3659;
    font-weight: 200;
}
.photo .camera {
    position: absolute;
    width: 107px;
    height: 64px;

    top: 25px;
    right: 15px;
}
.file {
    position: absolute;
    width: 107px;
    height: 64px;

    top: 25px;
    right: 15px;
}

input::-webkit-input-placeholder {
    color: #e9eaee;
    font-size: 14px;
}

/* 弹框 */
.bg {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999;
}

.bg .pop {
    width: 80%;
    background: #fff;
    margin-left: 10%;
    margin-top: 35%;
    border-radius: 6px;
}
.bg .pop .img {
    width: 100%;
}
.bg .close {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    margin-left: -25px;
    margin-top: 50px;
}

.bg .close img {
    width: 30px;
    margin-left: 10px;
    margin-top: 10px;
}
</style>
